<script setup>
import { useRouter } from 'vue-router'
import {
  Message,
  DataLine,
  Histogram,
  MapLocation,
  Search,
  User,
  Iphone,
  Platform,
  Clock,
  Connection,
  Collection,
  Female
} from '@element-plus/icons-vue'

let router = useRouter()
</script>

<template>
  <el-container style="height: 100vh; width: 100vw; margin: 0; padding: 0;">
    <el-header class="header">
      <span class="title">通讯大数据可视化展示系统</span>
      <span class="subtitle">Data Visualization Platform</span>
    </el-header>
    <el-container style="height: calc(100vh - 80px); width: 100%; margin: 0; padding: 0;">
      <el-aside style="height: 100%;">
        <el-menu
            class="side-menu"
            active-text-color="#409EFF"
            background-color="transparent"
            text-color="black"
            :default-active="$route.path"
            router
        >
          <el-menu-item index="/showone" >
            <el-icon><DataLine /></el-icon>
            <template #title>导航首页</template>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Message /></el-icon>
              <span>项目展示选项</span>
            </template>
            <el-menu-item index="/showtwo">
              <el-icon><Histogram /></el-icon>
              <template #title>今日每小时消息量</template>
            </el-menu-item>
            <el-menu-item index="/showthree">
              <el-icon><MapLocation /></el-icon>
              <template #title>今日各地区发送消息数据量</template>
            </el-menu-item>
            <el-menu-item index="/showfour">
              <el-icon><Search /></el-icon>
              <template #title>信息查询</template>
            </el-menu-item>
            <el-menu-item index="/showfive">
              <el-icon><User /></el-icon>
              <template #title>今日发送消息最多的 Top10 用户</template>
            </el-menu-item>
            <el-menu-item index="/showsix">
              <el-icon><User /></el-icon>
              <template #title>今日接收消息最多的 Top10 用户</template>
            </el-menu-item>
            <el-menu-item index="/showseven">
              <el-icon><Iphone /></el-icon>
              <template #title>发送人的手机型号分布情况</template>
            </el-menu-item>
            <el-menu-item index="/showeight">
              <el-icon><Platform /></el-icon>
              <template #title>发送人的设备操作系统分布情况</template>
            </el-menu-item>
            <el-menu-item index="/shownine">
              <el-icon><Clock /></el-icon>
              <template #title>消息在一天中的具体时间段的分布</template>
            </el-menu-item>
            <el-menu-item index="/showten">
              <el-icon><Connection /></el-icon>
              <template #title>网络类型分布</template>
            </el-menu-item>
            <el-menu-item index="/showeleven">
              <el-icon><Collection /></el-icon>
              <template #title>同名统计分布</template>
            </el-menu-item>
            <el-menu-item index="/showtwelve">
              <el-icon><Female /></el-icon>
              <template #title>男女使用手机型号分布情况</template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main style="height: 100%;">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
/* 修改最外层容器的背景图 */
.el-container {
  background-image: url('@/img/bg5.jpg'); /* 背景图路径 */
  background-size: 100% 800px;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.header {
  background: linear-gradient(135deg, #89cff0, #0047ab);;
  color: black;
  height: 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.title {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
}

.subtitle {
  font-size: 20px;
  opacity: 0.8;
  margin-top: 5px;
}

.main-container {
  height: calc(100% - 80px);
}

.sidebar {
  background-color: transparent; /* 使侧边栏背景透明 */
}

.side-menu {
  border-right: none;
  background-color: rgb(143, 190, 236, 0.3);
}

.side-menu :deep(.el-sub-menu__title),
.side-menu :deep(.el-menu-item) {
  height: 48px;
  line-height: 48px;
}

.side-menu :deep(.el-menu-item) {
  transition: none;
}

.side-menu :deep(.el-menu-item.is-active) {
  background-color: rgba(255, 255, 255, 0.3) !important;
  position: relative;
}

.side-menu :deep(.el-menu-item.is-active)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  background-color: #409EFF;
}

.side-menu :deep(.el-icon) {
  margin-right: 8px;
  font-size: 18px;
}

.content-area {
  padding: 20px;
  background-color: rgba(240, 242, 245, 0.8); /* 添加透明度，使背景图可以透过内容区域显示 */
}
</style>